﻿/* code Javascript 
 * Jeu des balles */
    
$(function(){  
    init();
}); 

function init(){
    // STRUCTURE
    
     
    // DONNEES
    // tableau Couleurs des balles id = couleur, en hexa
    listeCouleurs = new Array();
    listeCouleurs[0] = ["rouge","#ff0000"];
    listeCouleurs[1] = ["vert","#b08000"];
    listeCouleurs[2] = ["bleu","#0000ff"];  
    /// tableau Tailles des balles (id = rayon, taille
    listeTailles = new Array();
    listeTailles[0] = ["5","petite"];
    listeTailles[1] = ["10","moyenne"];
    listeTailles[2] = ["20","grande"];      
    /// tableau Niveaux (id = id couleur,id taille)
    listeNiveaux = new Array();
    listeNiveaux[0] = [0,0];
    listeNiveaux[1] = [1,0];
    listeNiveaux[2] = [1,2];
    listeNiveaux[3] = [2,1];
    listeNiveaux[4] = [2,2];
    listeNiveaux[5] = [0,1];
    // tableau des balles (id = id niveau, id couleur, id taille, position/x, vitesse, position/y, visible)
    listeBalles = new Array();
    listeBalles[0] = [0,0,0,200,1,5,1];
    listeBalles[1] = [0,1,1,20,2,20,1];
    listeBalles[2] = [0,2,2,40,1,15,1];
    listeBalles[3] = [1,2,2,50,3,0,1];
    listeBalles[4] = [1,1,0,100,1,30,1];
    listeBalles[5] = [1,0,0,80,2,5,1];
  

    


    
    
    // VARIABLES
    tempsJeu=0;
    niveauCourant = 1;
    ecranCourant = 'accueil';
    // GESTIONNAIRES
    
    // REGLES
    
    // LANCEMENT
   afficheAccueil();
}
function afficheAccueil(){
/* 
•  met à jour la variable ecranCourant (ecranCourant=''accueil'';),
• affiche l'écran #accueil:
    le texte du titre (une chaîne de caractères)
    le code de l'image du jeu
    le texte expliquant les règles,
    le code du bouton #boutonJeu
• masque les autres écrans
 */
    ecranCourant='accueil';

    $('#titre').show();
    $('#titre').html('<p>Clic sur les balles</p>');
    $('#texte').show();
    $('#texte').html('Dans chacun des niveaux de jeu, cliquer sur les balles correspondant à la consigne affichée avant qu\'elles touchent le bas du cadre !');
    $('#monImage').show();
    $('#monImage').attr( "alt", "(ici, plus tard une image du jeu)" );
    //$('#monImage').attr( "src", "./images/smiley.jpg" );
    $('#monImage').attr( "src", "" );
    $('#boutonJ').show();
       
    cacheJeu();
    cacheBilan();


}
function cacheAccueil(){
    $('#titre').hide();
    $('#texte').hide();
    $('#monImage').hide();
}
function cacheJeu(){
    $('#consigne').hide();
    $('#heure').hide();    
    $('#animation').hide();
    $('#dessin').hide();
    $('#boutonQ').hide();
}
function cacheBilan(){
    $('#recap').hide();
    $('#boutonA').hide();
    $('#boutonR').hide();
}
function fonctionJouer(){
    afficheJeu();
}
function afficheJeu(){
   /* on définit :
• le texte pour la consigne,
• le code du canvas,
• le code du bouton #boutonQuitter. */
    
    ecranCourant='jeu';
    
    cacheAccueil();

    // relance du timer 
    timerIni = 0;
    inter = setInterval(Horloge, 1000);
    idNiveau = niveauCourant-1;
    $('#consigne').show();
    $('#consigne').html(afficheConsigne(idNiveau));
    $('#heure').show();
    $('#heure').html(' ');
    $('#boutonJ').hide();

    $('#animation').show();
    $('#dessin').show();
    $('#boutonQ').show();
    cacheBilan();
    
    // canvas
    monCanvas = document.getElementById('dessin');
   
    if (monCanvas.getContext){
        ctx = monCanvas.getContext('2d');   
        // incrément
        iCanvas=0;
    } else {
        alert('canvas non supporté par ce navigateur');
    }
    // time
    interCanvas = setInterval(Animer, 100);	
    setTimeout(Stopper, 200000);

    // interactivité sur le canvas
    monCanvas.addEventListener("click", clicCanvas, false);	
    
    // détermination des cercles en fonction du niveau
    if (niveauCourant == 1){
        idBallesInit = 0;
    }
    else {
        if (niveauCourant == 2) {
            idBallesInit = 3;
        }
        else {
            idBallesInit = 6;
        }
    }

    // 3 cercles, position/x et position/y
    // tableau des balles (id = id niveau, id couleur, id taille, position/x, vitesse, position/y, visible)
    cercle = [[100,0,10,1],[150,0,20,1],[180,0,15,1]];
    // cercles = [[listeBalles[idBallesInit][3],0,listeBalles[idBallesInit][5],1],[[listeBalles[idBallesInit+1][3],0,listeBalles[idBallesInit+1][5],1]],[[listeBalles[idBallesInit+2][3],0,listeBalles[idBallesInit+2][5],1]]];
}

function afficheConsigne(idNiveau){
    // construire la consigne à partir du niveau de jeu
    consigne = '<p>Clic sur les balles de couleur ';
    consigne = consigne + listeCouleurs[listeNiveaux[idNiveau][0]][0];
    consigne = consigne + ' et de taille ';
    consigne = consigne + listeTailles[listeNiveaux[idNiveau][1]][1];
    consigne = consigne + '</p>';
    return consigne;
}   

function fonctionQuitter(){
    afficheAccueil();
}   

// clic sur le canvas
function clicCanvas(e){
    // position de la souris / document
    var xSourisDocument = e.pageX; 
    var ySourisDocument = e.pageY;
    // position du canvas / document
    var xCanvas = monCanvas.offsetLeft;
    var yCanvas = monCanvas.offsetTop;
    // position du clic / canvas
    xSourisCanvas = xSourisDocument - xCanvas;
    ySourisCanvas = ySourisDocument - yCanvas;
    // test si un cercle est cliqué
    for (var c=0; c<cercles.length; c++){
        var R = cercles[c][2];
        if(Math.abs(cercles[c][0]-xSourisCanvas) < R
            && Math.abs(cercles[c][1]-ySourisCanvas) < R){
            cercles[c][3]=0;
            //listeBalles[c][6]=0;
            /* le break qui suit appelle une réflexion que je vous soumettrai à la fin de la semaine 7 */
            break;
        }
    }
}

// fonction de dessin
function Animer() {
    // incrémentation
    iCanvas++;		
    // composition
    ctx.globalCompositeOperation = 'lighter';	
    // effaçage
    ctx.clearRect(0,0, monCanvas.width,monCanvas.height);
    // translation du contexte et dessin d'une balle
    dessineBalle(0,2);
    // translation du contexte et dessin d'une balle
    dessineBalle(1,1);
    // translation du contexte et dessin d'une balle
    dessineBalle(2,3);

}
// fonction d'arrêt
function Stopper() {
    clearInterval(interCanvas);
}
// dessin d'une balle : x départ, vitesse / y, rayon
function dessineBalle(idCercle,v){
    if(cercles[idCercle][3]==1){
            // sauvegarde de l'état du contexte
            ctx.save();
            // dessin
            var R = cercles[idCercle][2];
            cercles[idCercle][1]= v*i;
            ctx.translate(cercles[idCercle][0],v*i);
    ctx.beginPath();
    ctx.arc(0, 0, R, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'green';
    // ctx.fillStyle = listeCouleurs[listeNiveaux[idNiveau][0]][1];
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#003300';
    ctx.stroke();		
            // retour à l'état précédent du contexte
            ctx.restore();
    }
}
function afficheBilan(){
    
    ecranCourant='bilan';
    clearInterval(inter);
    cacheAccueil();
    cacheJeu();

    $('#recap').show();
    $('#recap').html('recap');
    $('#boutonA').show();
    $('#boutonR').show();
}
function fonctionRejouer(){
    afficheJeu();
} 
function fonctionAccueil(){
    afficheAccueil();
} 
/* fonction pour le timer */
function Horloge() {
    if(timerIni < 60){
        timerIni++;
        $('#heure').html(timerIni);
    } else 
        afficheBilan();
}